<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Scale Padding</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<link rel="stylesheet" href="../dist/uPlot.min.css">
	</head>
	<body>
		<script src="../dist/uPlot.iife.js"></script>
		<script>
			let xs = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];
			let vals = [-10,-9,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10];

			let data = [
				[1,2,3,4,5,6,7,8,9,10],

				Array(10).fill(-10500),
				Array(10).fill(-10000),
				Array(10).fill(-9500),

				Array(10).fill(-0.105),
				Array(10).fill(-0.100),
				Array(10).fill(-0.095),

				Array(10).fill(0),

				Array(10).fill(0.095),
				Array(10).fill(0.100),
				Array(10).fill(0.105),

				Array(10).fill(9500),
				Array(10).fill(10000),
				Array(10).fill(10500),
			];

			const opts = {
				width: 1600,
				height: 600,
				title: "Flat",
				scales: {
					x: {
						time: false,
					},
				},
				series: [
					{},
					...data.slice(1).map(d => ({
						label: ""+d[0],
						stroke: "red",
					}))
				],
			};

			let u = new uPlot(opts, data, document.body);
		</script>
	</body>
</html>